<template>
    <div class="page">
        <div class="head">
            <div class="date" @click="showChangeMonth">
                {{currentDay|format('YYYY.MM')}}
                <van-icon name="arrow" class="arrow-down"></van-icon>
            </div>
            <div class="name">
                {{userName}}
                <p @click="goToCalendar()" class="calendar">打卡日历</p>
            </div>
        </div>
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item :key="`collapse-${index}`" :name="`collapse-${index}`" v-for="(item,index) in me">
                <div slot="title" class="cell-title">{{item.label}}
                    <label class="number"
                           :style="{color: numberColor(item)}">{{item|empty}}{{item.append}}</label>
                </div>
                <div class="cell-item" v-for="info in item.list" v-if="item.list.length > 0">
                    {{info}}
                </div>
            </van-collapse-item>
        </van-collapse>
        <van-popup v-model="showDatePicker" position="bottom">
            <van-datetime-picker :max-date="maxDate" v-model="pickerDate" :type="format"
                                 @cancel="showDatePicker = false" @confirm="chooseDate"></van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    import service from '../apiNet'
    import dayjs from 'dayjs'

    export default {
        name: "PersonCard",
        filters:{
            empty:function (value) {
                if(value.day == "" && value.append == ""){
                    return "0天"
                }else {
                    return value.day
                }
            }
        },
        data() {
            return {
                now: new Date(),
                currentDay: new Date(),
                activeName: "",
                format: "year-month",
                pickerDate: null,
                showDatePicker: false,
                maxDate: new Date(),
                userId:ServerParam.UserId,
                userName: ServerParam.UserName ? ServerParam.UserName : "",
                me: {
                    late:
                        {
                            label: "迟到早退",
                            list: [],
                            color: "#ff2f1b",
                            day: "",
                            append: "次"
                        },
                    leave:
                        {
                            label: "请假",
                            list: [],
                            color: "#44bdf1",
                            day: "",
                            append: ""
                        },
                    notcard:
                        {
                            label: "缺卡",
                            list: [],
                            color: "#f18a10",
                            day: "",
                            append: "次"

                        },
                    away:
                        {
                            label: "旷工",
                            list: [],
                            color: "#ff2f1b",
                            day: "",
                            append: "天"
                        },
                    out:
                        {
                            label: "外勤",
                            list: [],
                            color: "#159922",
                            day: "",
                            append: "天"
                        },
                },
            }
        },
        mounted() {
            this.loadMeInfo()
        },
        methods: {
            goToCalendar(){
              this.$router.push({
                  path:"/detail/day/calendar",
                  query:{userId:this.userId,userName:this.userName,date:dayjs(this.currentDay).format('YYYY-M-D')}
              })
            },
            showChangeMonth() {
                this.pickerDate = this.currentDay;
                this.showDatePicker = true;
            },
            numberColor(item) {
                if (item.day > 0) {
                    return item.color;
                } else {
                    return "#bbb"
                }
            },
            chooseDate(date) {
                this.currentDay = date;
                this.loadMeInfo()
                this.showDatePicker = false
            },

            loadMeInfo() {
                this.$toast.loading({
                    message: "正在加载...",
                    duration: 0,
                })
                service.loadCardInfo(this.currentDay, 'month', 'YYYY-MM').then((res) => {
                    if (res.Error == 0) {
                        let data = res.Data;
                        console.log(data)

                        let filter = data.filter((item) => {
                            if (item.userName == this.userName) {
                                return item
                            }
                        })
                        if (filter.length > 0) {
                            let meItem = filter[0]
                            this.me.late.list = meItem.lateInfo == "" ? [] : meItem.lateInfo.split(",")
                            this.me.late.day = meItem.late
                            this.me.leave.list = meItem.leaveInfo == "" ? [] : meItem.leaveInfo.split(",")
                            this.me.leave.day = meItem.leave
                            this.me.notcard.list = meItem.notCardInfo == "" ? [] : meItem.notCardInfo.split(",")
                            this.me.notcard.day = meItem.notCard
                            this.me.away.list = meItem.awayInfo == "" ? [] : meItem.awayInfo.split(",")
                            this.me.away.day = meItem.away
                            this.me.out.list = meItem.outdayInfo == "" ? [] : meItem.outdayInfo.split(",")
                            this.me.out.day = meItem.outday
                        }
                        console.log(this.me)
                    }
                    this.$toast.clear()
                }).catch(error => {
                    console.error(error)
                    this.$toast.clear()
                })
                // service.loadCardInfo()
            }
        }
    }
</script>

<style scoped>

</style>